<template>
    <div class="massageInfo_container">
        <div class="lunbotu">
            <img src="../../images/about/lunboList1.png" alt="">
        </div>

        <div class="massageInfo">
            <ol class="breadcrumb">
                <li><a href="#"><img src="../../images/homeIcon.png"/>首页</a></li>
                <li><a href="#"> {{ msg }} </a></li>
                <li class="active">{{ type }}</li>
            </ol>

            <div class="main">
                <div class="left">
                    <h1>{{ title }}</h1>
                    <h6>{{ type }} <i></i> {{time | formatDate }}</h6>
                    <div class="contentMsg" v-html=" content "></div>
                    <!-- <comment></comment> -->
                </div>
                <div class="right">
                    <ul>
                        <li v-for="item in articleListData" :key="item.id">
                            <div class="listInfo">
                                <div class="img" @click="getDataList(item.id)">
                                    <img :src="$store.state.httpUrl + item.imgUrl" alt="">
                                </div>
                                <div class="imgIfo">
                                    <p @click="getDataList(item.id)">{{ item.title }}</p>
                                    <a href="#">{{ item.categories }} <i></i> <span> {{item.gtmModified | formatDate }}</span></a>
                                 </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import comment from "./Commment.vue"
import dateFormat from '../../js/Date'

export default {
    data(){
        return {
            msg:"",
            id:'',
            title:'',
            type:'',
            time:'',
            content:'',
            articleListData:[]
        }
    },
    created(){
        if(this.$route.path == "/read/readIfo"){
            this.msg = "阅读";
            this.readList();
        }else{
            this.msg = "资讯";
            this.articleList();
        }
        this.id = this.$route.params.id;
        this.getDataList();
    },
    methods:{
        readList(){
            this.$http.get(this.$store.state.httpUrl + '/index/article/article').then((response) => {
                // success callback
                console.log(response)
                if(response.status == 200){
                    this.articleListData = response.body.data;
                }
            }, (response) => {
                // error callback
            });
        },
        articleList(){
            this.$http.get(this.$store.state.httpUrl + '/index/article/content').then((response) => {
                // success callback
               // console.log(response)
                if(response.status == 200){
                    this.articleListData = response.body.data;
                }

            }, (response) => {
                // error callback
            });
        },
        getDataList(id){
            let data = {id:this.id};
            if(id){
                data.id = id;
            }
            this.$http.post(this.$store.state.httpUrl + '/index/article/conDetail', data ).then((response) => {
                // success callback
                //console.log(response)
                if(response.status == 200){
                    var obj = response.body.data;
                    this.title = obj.title;
                    this.content = obj.content;
                    this.time = obj.gtmModified;
                    this.type = obj.categories;
                }
            }, (response) => {
                // error callback
            });
        }
    },
    watch:{
        "$route":function(to,from){
            //from 对象中包含当前地址
            //to 对象中包含目标地址
            //其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。
            if(to.path == "/read/readIfo"){
                this.msg = "阅读";
            }else{
                this.msg = "资讯";
            }
            this.id = this.$route.params.id;
            this.getDataList();
        }
    },
    components:{
        comment,
    },
    filters: {
         formatDate(time) {
             let date = new Date(time);
             return dateFormat.formatDate(date, "yyyy / MM / dd");
         }
     },
}
</script>


<style lang="less" scoped>
    .massageInfo_container {
        .lunbotu img {
            width:100%;
            max-height: 350px;
        }
        .massageInfo {
            width:1000px;
            margin:0 auto;

            .breadcrumb {
                background-color: #fff;
                margin: 10px 0 8px;
                padding: 8px 0;
                font-size: 12px;

                img {
                    height: 15px;
                    width: auto;
                    margin-top: -3px;
                    margin-right: 5px;
                }
            }

            .main {
                overflow: hidden;

                
                i {
                    display: inline-block;
                    margin: 0 5px;
                    width: 1px;
                    background-color: #ccc;
                    height: 11px;
                    vertical-align: middle;
                }

                .left {
                    float:left;
                    width:70%;

                    h1 {
                        font-size: 18px;
                        font-weight: 700;
                        line-height: 40px;
                        margin-top: 10px;
                    }

                    h6 {
                        font-size: 12px;
                        color:#999;
                        margin-bottom:20px;
                    }

                    .contentMsg {
                        color: #555;
                        font-size: 14px;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #ddd;

                        img {
                            width:100%;
                        }
                        p {
                            margin:12px 0;
                            text-indent: 2em;
                        }
                    }
                }

                .right {
                    float:right;
                    width:220px;

                    .listInfo {
                        margin-top:15px;
                        overflow: hidden;
                        border-bottom: 1px solid #ddd;

                        div {
                            float:left;
                        }
                        img {
                            width:100%;
                            cursor: pointer;
                        }
                        .imgIfo {
                            width:100%;
                            height:100%;
                            position: relative;

                            p {
                                line-height: 20px;
                                padding: 15px 0 5px;
                                font-size: 14px;
                                cursor: pointer;
                            }

                        }
                        .imgIfo > a {
                            text-decoration: none;
                            color:#a5a5a5;
                            font-size: 12px;
                            padding: 0 0 12px;
                            display: block;

                        }
                    }
                    .listInfo + .listInfo {
                        margin-top:30px;
                    } 
                }
            }
        }
    }
</style>
